﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>chinaz</title>

    <!-- BOOTSTRAP STYLES-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FONTAWESOME STYLES-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
     <!--PAGE LEVEL STYLES-->
    <link href="assets/css/bootstrap-social.css" rel="stylesheet" />
    <!--CUSTOM BASIC STYLES-->
    <link href="assets/css/basic.css" rel="stylesheet" />
    <!--CUSTOM MAIN STYLES-->
    <link href="assets/css/custom.css" rel="stylesheet" />
    <!-- GOOGLE FONTS-->
    <link href='http://fonts.useso.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
    <div id="wrapper">
        <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">COMPANY NAME</a>
            </div>

            <div class="header-right">
 <a href="message-task.html" class="btn btn-info" title="New Message"><b>30 </b><i class="fa fa-envelope-o fa-2x"></i></a>
                <a href="message-task.html" class="btn btn-primary" title="New Task"><b>40 </b><i class="fa fa-bars fa-2x"></i></a>
                <a href="login.html" class="btn btn-danger" title="Logout"><i class="fa fa-exclamation-circle fa-2x"></i></a>


            </div>
        </nav>
        <!-- /. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li>
                        <div class="user-img-div">
                            <img src="assets/img/user.png" class="img-thumbnail" />

                            <div class="inner-text">
                                Jhon Deo Alex
                            <br />
                                <small>Last Login : 2 Weeks Ago </small>
                            </div>
                        </div>

                    </li>


                    <li>
                        <a  href="index.html"><i class="fa fa-dashboard "></i>Dashboard</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-desktop "></i>UI Elements <span class="fa arrow"></span></a>
                         <ul class="nav nav-second-level">
                            <li>
                                <a href="panel-tabs.html"><i class="fa fa-toggle-on"></i>Tabs & Panels</a>
                            </li>
                            <li>
                                <a href="notification.html"><i class="fa fa-bell "></i>Notifications</a>
                            </li>
                             <li>
                                <a href="progress.html"><i class="fa fa-circle-o "></i>Progressbars</a>
                            </li>
                             <li>
                                <a href="buttons.html"><i class="fa fa-code "></i>Buttons</a>
                            </li>
                             <li>
                                <a href="icons.html"><i class="fa fa-bug "></i>Icons</a>
                            </li>
                             <li>
                                <a href="wizard.html"><i class="fa fa-bug "></i>Wizard</a>
                            </li>
                             <li>
                                <a href="typography.html"><i class="fa fa-edit "></i>Typography</a>
                            </li>
                             <li>
                                <a href="grid.html"><i class="fa fa-eyedropper "></i>Grid</a>
                            </li>
                            
                           
                        </ul>
                    </li>
                     <li>
                        <a class="active-menu-top" href="#"><i class="fa fa-yelp "></i>Extra Pages <span class="fa arrow"></span></a>
                         <ul class="nav nav-second-level collapse in">
                            <li>
                                <a href="invoice.html"><i class="fa fa-coffee"></i>Invoice</a>
                            </li>
                            <li>
                                <a href="pricing.html"><i class="fa fa-flash "></i>Pricing</a>
                            </li>
                             <li>
                                <a href="component.html"><i class="fa fa-key "></i>Components</a>
                            </li>
                             <li>
                                <a class="active-menu"  href="social.html"><i class="fa fa-send "></i>Social</a>
                            </li>
                            
                             <li>
                                <a href="message-task.html"><i class="fa fa-recycle "></i>Messages & Tasks</a>
                            </li>
                            
                           
                        </ul>
                    </li>
                    <li>
                        <a href="table.html"><i class="fa fa-flash "></i>Data Tables </a>
                        
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bicycle "></i>Forms <span class="fa arrow"></span></a>
                         <ul class="nav nav-second-level">
                           
                             <li>
                                <a href="form.html"><i class="fa fa-desktop "></i>Basic </a>
                            </li>
                             <li>
                                <a href="form-advance.html"><i class="fa fa-code "></i>Advance</a>
                            </li>
                             
                           
                        </ul>
                    </li>
                     <li>
                        <a href="gallery.html"><i class="fa fa-anchor "></i>Gallery</a>
                    </li>
                     <li>
                        <a href="error.html"><i class="fa fa-bug "></i>Error Page</a>
                    </li>
                    <li>
                        <a href="login.html"><i class="fa fa-sign-in "></i>Login Page</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sitemap "></i>Multilevel Link <span class="fa arrow"></span></a>
                         <ul class="nav nav-second-level">
                            <li>
                                <a href="#"><i class="fa fa-bicycle "></i>Second Level Link</a>
                            </li>
                             <li>
                                <a href="#"><i class="fa fa-flask "></i>Second Level Link</a>
                            </li>
                            <li>
                                <a href="#">Second Level Link<span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#"><i class="fa fa-plus "></i>Third Level Link</a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-comments-o "></i>Third Level Link</a>
                                    </li>

                                </ul>

                            </li>
                        </ul>
                    </li>
                   
                    <li>
                        <a href="blank.html"><i class="fa fa-square-o "></i>Blank Page</a>
                    </li>
                </ul>
            </div>

        </nav>
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper">
            <div id="page-inner">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-head-line">Social Buttons</h1>
                        <h1 class="page-subhead-line">This is dummy text , you can replace it with your original text. </h1>

                    </div>
                </div>
                <!-- /. ROW  -->
                <div class="row">
                    <div class="col-md-12">
                     <div class="panel panel-default">
                        <div class="panel-heading">
                            Social Buttons
                        </div>
                        <div class="panel-body">
                            <div class="row">

                            
                             <div class="col-md-4 social-buttons">
          <h3>The Buttons</h3>
          <a class="btn btn-block btn-social btn-adn" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-adn']);">
            <i class="fa fa-adn"></i> Sign in with App.net
          </a>
          <a class="btn btn-block btn-social btn-bitbucket" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-bitbucket']);">
            <i class="fa fa-bitbucket"></i> Sign in with Bitbucket
          </a>
          <a class="btn btn-block btn-social btn-dropbox" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-dropbox']);">
            <i class="fa fa-dropbox"></i> Sign in with Dropbox
          </a>
          <a class="btn btn-block btn-social btn-facebook" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-facebook']);">
            <i class="fa fa-facebook"></i> Sign in with Facebook
          </a>
          <a class="btn btn-block btn-social btn-flickr" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-flickr']);">
            <i class="fa fa-flickr"></i> Sign in with Flickr
          </a>
          <a class="btn btn-block btn-social btn-foursquare" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-foursquare']);">
            <i class="fa fa-foursquare"></i> Sign in with Foursquare
          </a>
          <a class="btn btn-block btn-social btn-github" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-github']);">
            <i class="fa fa-github"></i> Sign in with GitHub
          </a>
          <a class="btn btn-block btn-social btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google-plus']);">
            <i class="fa fa-google-plus"></i> Sign in with Google
          </a>
          <a class="btn btn-block btn-social btn-instagram" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-instagram']);">
            <i class="fa fa-instagram"></i> Sign in with Instagram
          </a>
          <a class="btn btn-block btn-social btn-linkedin" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-linkedin']);">
            <i class="fa fa-linkedin"></i> Sign in with LinkedIn
          </a>
          <a class="btn btn-block btn-social btn-microsoft" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-microsoft']);">
            <i class="fa fa-windows"></i> Sign in with Microsoft
          </a>
          <a class="btn btn-block btn-social btn-openid" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-openid']);">
            <i class="fa fa-openid"></i> Sign in with OpenID
          </a>
          <a class="btn btn-block btn-social btn-pinterest" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-pinterest']);">
            <i class="fa fa-pinterest"></i> Sign in with Pinterest
          </a>
          <a class="btn btn-block btn-social btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-reddit']);">
            <i class="fa fa-reddit"></i> Sign in with Reddit
          </a>
          <a class="btn btn-block btn-social btn-soundcloud" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-soundcloud']);">
            <i class="fa fa-soundcloud"></i> Sign in with SoundCloud
          </a>
          <a class="btn btn-block btn-social btn-tumblr" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-tumblr']);">
            <i class="fa fa-tumblr"></i> Sign in with Tumblr
          </a>
          <a class="btn btn-block btn-social btn-twitter" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-twitter']);">
            <i class="fa fa-twitter"></i> Sign in with Twitter
          </a>
          <a class="btn btn-block btn-social btn-vimeo" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-vimeo']);">
            <i class="fa fa-vimeo-square"></i> Sign in with Vimeo
          </a>
          <a class="btn btn-block btn-social btn-vk" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-vk']);">
            <i class="fa fa-vk"></i> Sign in with VK
          </a>
          <a class="btn btn-block btn-social btn-yahoo" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-yahoo']);">
            <i class="fa fa-yahoo"></i> Sign in with Yahoo!
          </a>

          <hr>

          <div class="text-center">
            <a class="btn btn-social-icon btn-adn" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-adn']);"><i class="fa fa-adn"></i></a>
            <a class="btn btn-social-icon btn-bitbucket" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-bitbucket']);"><i class="fa fa-bitbucket"></i></a>
            <a class="btn btn-social-icon btn-dropbox" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-dropbox']);"><i class="fa fa-dropbox"></i></a>
            <a class="btn btn-social-icon btn-facebook" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-facebook']);"><i class="fa fa-facebook"></i></a>
            <a class="btn btn-social-icon btn-flickr" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-flickr']);"><i class="fa fa-flickr"></i></a>
            <a class="btn btn-social-icon btn-foursquare" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-foursquare']);"><i class="fa fa-foursquare"></i></a>
            <a class="btn btn-social-icon btn-github" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-github']);"><i class="fa fa-github"></i></a>
            <a class="btn btn-social-icon btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-google-plus']);"><i class="fa fa-google-plus"></i></a>
            <a class="btn btn-social-icon btn-instagram" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-instagram']);"><i class="fa fa-instagram"></i></a>
            <a class="btn btn-social-icon btn-linkedin" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-linkedin']);"><i class="fa fa-linkedin"></i></a>
            <a class="btn btn-social-icon btn-microsoft" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-microsoft']);"><i class="fa fa-windows"></i></a>
            <a class="btn btn-social-icon btn-openid" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-openid']);"><i class="fa fa-openid"></i></a>
            <a class="btn btn-social-icon btn-pinterest" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-pinterest']);"><i class="fa fa-pinterest"></i></a>
            <a class="btn btn-social-icon btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-reddit']);"><i class="fa fa-reddit"></i></a>
            <a class="btn btn-social-icon btn-soundcloud" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-soundcloud']);"><i class="fa fa-soundcloud"></i></a>
            <a class="btn btn-social-icon btn-tumblr" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-tumblr']);"><i class="fa fa-tumblr"></i></a>
            <a class="btn btn-social-icon btn-twitter" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-twitter']);"><i class="fa fa-twitter"></i></a>
            <a class="btn btn-social-icon btn-vimeo" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-vimeo']);"><i class="fa fa-vimeo-square"></i></a>
            <a class="btn btn-social-icon btn-vk" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-vk']);"><i class="fa fa-vk"></i></a>
            <a class="btn btn-social-icon btn-yahoo" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-yahoo']);"><i class="fa fa-yahoo"></i></a>
          </div>
        </div>

        <div class="col-md-4">
          <h3>Available Classes</h3>
          <ul class="social-class list-unstyled">
            <li data-code="adn" data-name="App.net"><code>btn-adn</code> <span class="social-hex">#D87A68</span></li>
            <li data-code="bitbucket" data-name="Bitbucket"><code>btn-bitbucket</code> <span class="social-hex">#205081</span></li>
            <li data-code="dropbox" data-name="Dropbox"><code>btn-dropbox</code> <span class="social-hex">#1087DD</span></li>
            <li data-code="facebook" data-name="Facebook"><code>btn-facebook</code> <span class="social-hex">#3B5998</span></li>
            <li data-code="flickr" data-name="Flickr"><code>btn-flickr</code> <span class="social-hex">#2BA9E1</span></li>
            <li data-code="foursquare" data-name="Foursquare"><code>btn-foursquare</code> <span class="social-hex">#f94877</span></li>
            <li data-code="github" data-name="GitHub"><code>btn-github</code> <span class="social-hex">#444444</span></li>
            <li data-code="google-plus" data-name="Google"><code>btn-google-plus</code> <span class="social-hex">#DD4B39</span></li>
            <li data-code="instagram" data-name="Instagram"><code>btn-instagram</code> <span class="social-hex">#3F729B</span></li>
            <li data-code="linkedin" data-name="LinkedIn"><code>btn-linkedin</code> <span class="social-hex">#007BB6</span></li>
            <li data-code="microsoft" data-icon="windows" data-name="Microsoft"><code>btn-microsoft</code> <span class="social-hex">#2672EC</span></li>
            <li data-code="openid" data-name="OpenID"><code>btn-openid</code> <span class="social-hex">#F7931E</span></li>
            <li data-code="pinterest" data-name="Pinterest"><code>btn-pinterest</code> <span class="social-hex">#CB2027</span></li>
            <li data-code="reddit" data-name="Reddit"><code>btn-reddit</code> <span class="social-hex">#EFF7FF</span></li>
            <li data-code="soundcloud" data-name="SoundCloud"><code>btn-soundcloud</code> <span class="social-hex">#FF5500</span></li>
            <li data-code="tumblr" data-name="Tumblr"><code>btn-tumblr</code> <span class="social-hex">#CB2027</span></li>
            <li data-code="twitter" data-name="Twitter"><code>btn-twitter</code> <span class="social-hex">#55ACEE</span></li>
            <li data-code="vimeo" data-icon="vimeo-square" data-name="Vimeo"><code>btn-vimeo</code> <span class="social-hex">#1AB7EA</span></li>
            <li data-code="vk" data-name="VK"><code>btn-vk</code> <span class="social-hex">#587EA3</span></li>
            <li data-code="yahoo" data-name="Yahoo!"><code>btn-yahoo</code> <span class="social-hex">#720E9E</span></li>
          </ul>
        </div>
        <div class="col-md-4">
          <div class="social-sizes">
            <h3>Different Sizes</h3>
            <a class="btn btn-block btn-social btn-lg btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-lg']);"><i class="fa fa-reddit"></i>Sign in with Reddit</a>
            <a class="btn btn-block btn-social btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-md']);"><i class="fa fa-reddit"></i>Sign in with Reddit</a>
            <a class="btn btn-block btn-social btn-sm btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-sm']);"><i class="fa fa-reddit"></i>Sign in with Reddit</a>
            <a class="btn btn-block btn-social btn-xs btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-xs']);"><i class="fa fa-reddit"></i>Sign in with Reddit</a>
            <hr>
            <div class="text-center">
              <a class="btn btn-social-icon btn-lg btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-lg']);"><i class="fa fa-reddit"></i></a>
              <a class="btn btn-social-icon btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-md']);"><i class="fa fa-reddit"></i></a>
              <a class="btn btn-social-icon btn-sm btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-sm']);"><i class="fa fa-reddit"></i></a>
              <a class="btn btn-social-icon btn-xs btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-xs']);"><i class="fa fa-reddit"></i></a>
            </div>
          </div>
          <hr>
          <div class="alert alert-info">
            <h4>Check them out in a real projects</h4>
            <ul>
              <li><a class="alert-link" href="https://gae-init.appspot.com/signin/" onclick="_gaq.push(['_trackEvent', 'exit', 'body', 'gae-init']);">gae-init</a></li>
              <li><a class="alert-link" href="https://restaurant.app.foodit.com/rms/signin" onclick="_gaq.push(['_trackEvent', 'exit', 'body', 'foodit']);">FOODit</a></li>
            </ul>
          </div>
        </div>
                                </div>
                            </div>
                         </div>
       </div>
      </div>
                  <!-- /. ROW  -->
            </div>
            <!-- /. PAGE INNER  -->
        </div>
        <!-- /. PAGE WRAPPER  -->
    </div>
    <!-- /. WRAPPER  -->
    <div id="footer-sec">
        Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
    </div>
    <!-- /. FOOTER  -->
    <!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
    <!-- JQUERY SCRIPTS -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <!-- BOOTSTRAP SCRIPTS -->
    <script src="assets/js/bootstrap.js"></script>
    <!-- METISMENU SCRIPTS -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- CUSTOM SCRIPTS -->
    <script src="assets/js/custom.js"></script>


</body>
</html>
